<template>
    <div>
        <a-spin :spinning="loading" size="large" class="loading-spinner" />
        <div class="userInfo-box" v-show="!loading">
            
     
            <div>


            <!-- 顶部用户信息 -->
            <div class="user-header" >

                <div class="user-box-wap" >
                    <div class="user-header_img">
                        <img :src="userInfo.avatar" alt="" class="userimg">
                    </div>
                    <div>
                        <div
                            style="display: flex; flex-direction: column; gap: 10px; text-align: left; ">
                            <div class="userNmae">{{ userInfo.realname }}</div>
                            <div class="userIntro">
                              
                                <div> {{ userInfo.deptName }}</div>
                                <div>  {{ userInfo.positionName }}</div>
                            </div>
                          
                        </div>
                        <!-- <div style="margin-top: 10px;">
                            <span class="number">账号：{{ userInfo.workNo }}</span>
                            <img src="../../assets/images/new_img/复制2.png" alt="" @click="copyAccount"
                                class="account-item" v-show="!isCopied">
                            <img src="../../assets/images/new_img/已复制.png" alt="" class="account-item"
                                v-show="isCopied">
                        </div> -->

                    </div>
                </div>

                <!-- 数据统计 -->
                <div class="user-stats">
                    <div v-for="(stat, index) in userStats" :key="index" class="stat-item"
                        @click="handleStatistics(stat.key)">
                        <div class="stat-value">{{ stat.value }}</div>
                        <div class="stat-label">{{ stat.label }}</div>
                    </div>
                </div>
            </div>


            <!-- 功能菜单 -->
            <div class="menu_item_box">
                <div v-for="(item, index) in menuItems" :key="index" class="menu_item "
                    @click="handleMenuUser(item.action)">
                    <div class="single">
                        <img :src="iconEnum[item.type]" alt="" :style="{
                            width: `${item.iconSize.width}px`,
                            height: `${item.iconSize.height}px`,
                            position: 'relative',
                            top: '4px'
                        }">
                    </div>
                    <div style="font-size: 16px; color: var(--color-text);"> {{ item.label }}
                    </div>

                </div>

            </div>


             
        </div>
          </div>
    </div>
</template>

<script setup>
import { watch, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '@/store'
const { themeStore } = useStore()
const router = useRouter()
import {removeToken, removeUserId} from "~/utils/token";
import {message} from "ant-design-vue";

import { useHttp } from '@/api/http'
import Img_1 from '../../assets/images/new_img/下载2.png'
import Img_2 from '../../assets/images/new_img/眼睛.png'
import Img_3 from '../../assets/images/new_img/设置.png'
import Img_4 from '../../assets/images/new_img/退出账号.png'




// import { loginIn } from 'api'




// 用户头像
const showUserPanel = ref(false);
const userInfoContainer = ref(null);

// 切换面板显示状态
const toggleUserPanel = () => {
    showUserPanel.value = !showUserPanel.value;
};

// 点击外部关闭面板
const handleClickUserOutside = (event) => {
    if (userInfoContainer.value && !userInfoContainer.value.contains(event.target)) {
        showUserPanel.value = false;
    }
};

// 添加全局点击事件监听
onMounted(() => {
    document.addEventListener('click', handleClickUserOutside);


    

    // count.value.likeCount = themeStore.userInfoMyCount.thumbCount
	// count.value.downloadCount = themeStore.userInfoMyCount.collectCount
});

// 移除事件监听
onUnmounted(() => {
    document.removeEventListener('click', handleClickUserOutside);
});



// 用户信息数据
const userInfo = ref({});
const heUserIdData = ref({
    heUserId: ''
});

const getUserInfo = () => {
    useHttp.get('/web/my/heUser', {
        heUserId: getUserId()
    }).then((res) => {
        if (res.code === 200) {
            userInfo.value = res.result
            console.log(res.result.id);
            
            heUserIdData.heUserId = res.result.id
            console.log(heUserIdData,'数据吧');
            getCount()
       
            

        }
    })
}
getUserInfo()



// 统计数据
const userStats = ref([
    { label: '作品', value: 0, key: 'works', },
    { label: '获赞', value: 0, key: 'notifications', },
    { label: '关注', value: 0, key: 'following', },
    { label: '收藏', value: 0, key: 'collections', },
    { label: '下载量', value: 0, key: 'downloads', }
    
]);

const fieldMap = {
    myPicCount: 'works',
    thumbCount: 'notifications',
    interestCount: 'following',
    collectCount: 'collections',
    downLoadCount: 'downloads'
};

const getCount = () => {
    console.log("执行了");
    useHttp.get('/web/my/myCount', heUserIdData).then((res) => {
        themeStore.userInfoMyCount = res.result 
        const result = themeStore.userInfoMyCount;

        
        // 遍历映射表，更新对应的值
        for (let apiField in fieldMap) {
            const frontendKey = fieldMap[apiField];
            const statItem = userStats.value.find(item => item.key === frontendKey);
            if (statItem && result.hasOwnProperty(apiField)) {
                statItem.value = result[apiField];
            }
        }
    });
}



// 菜单项
const iconEnum = ref({
    1: Img_1,
    2: Img_2,
    3: Img_3,
    4: Img_4,

})
const menuItems = ref([
    { label: '下载记录', action: 'downloads', type: 1, iconSize: { width: 20, height: 22 } },
    { label: '浏览记录', action: 'BrowsingHistory', type: 2, iconSize: { width: 20, height: 18 } },
    // { label: '账号设置', action: 'settings', type: 3, iconSize: { width: 20, height: 20 } },
    { label: '退出账号', action: 'logout', type: 4, iconSize: { width: 20, height: 20 } }
])


// 用于控制是否显示"已复制"提示
const isCopied = ref(false);

// 复制操作
const copyAccount = () => {


    const account = userInfo.workNo;


    const tempInput = document.createElement('input');
    tempInput.value = account;
    document.body.appendChild(tempInput);


    tempInput.select();
    document.execCommand('copy');

    // 删除临时输入框
    document.body.removeChild(tempInput);

    // 显示复制成功提示
    isCopied.value = true;

    // 3秒后隐藏提示
    setTimeout(() => {
        isCopied.value = false;
    }, 3000);
};





const handleStatistics = (key) => {
    if (key === 'downloads') return;
    router.push({
        path: '/IndividualCenter/' + key
    })

}



// 菜单点击处理
const handleMenuUser = (action) => {
    console.log('执行操作:', action);
    if (action === 'logout') {
       
        showUserPanel.value = false;
        removeToken()
         removeUserId()
        message.success('退出登录成功！')
        setTimeout(() => {
        window.location.href = '/'
        }, 1000)
    } else if (action == 'downloads') {
        router.push({
            path: '/IndividualCenter/' + action
        })
    } else if (action == 'BrowsingHistory') {
        router.push({
            path: '/IndividualCenter/' + action

        })
    } else {
        router.push({
            path: '/info'
        })
    }


};


// 加载状态控制
const loading = ref(true)

// 模拟数据加载
onMounted(() => {
    setTimeout(() => {
        loading.value = false
    }, 1500) // 1.5秒后关闭加载状态
})


// // 打开登录
// const openLogin = () => {
//   loginRef.value.open()
// }


</script>

<style lang="less" scoped>


.user_img{
    width:120px;
    height:50px;
    margin:0 auto;
    margin-top:50px;
    text-align: center;
    line-height:50px;
    color:#fff;
    border-radius: 10px;
    background-color:#ee9b86;
     font-size: 18px;
}

/* 用户面板 */

.userInfo-box {
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;


    .user-header {
        width: 100%;
        padding-bottom: 6px;
        border-bottom: 10px solid var(--border-b);


        .user-box-wap {
            display: flex;
            align-items: center;
            gap: 30px;
            color: var(--color-text);
            margin-top: 40px;




            .user-header_img {



                .userimg {
                    // width: 60px;
                    // height: 60px;
                    // border-radius: 50%;
                    // margin-left: 10px;

	            width: clamp(80px, 10vw, 100px);
				height: clamp(80px, 10vw, 100px);
				border-radius: 50%;
				object-fit: cover;
                }
            }

            .userNmae {
                height: 20px;
                color: var(--color-text-3);
                font-size: 18px;
                text-align: left;
                line-height: 20px;
                white-space: nowrap;
        


            }


            .userIntro {
                width: 100%;
                height: 14px;
                line-height: 14px;
                font-size: 16px;
                white-space: nowrap;
                align-self: flex-end;
                color: var(--color-text-3);
                display: flex;
                // gap: 10px;
            }

            .number {
                font-size: 16px;
                color: var(--color-text);
                margin-top: 10vw;
                margin-right: 4px;
            }

            .account-item {
                width: 15px;
                height: 15px;
            }
        }

    }


    /* 统计数据 */
    .user-stats {
        width: 100%;

        display: flex;
        justify-content: space-around;
        padding: 1vw 0;

        margin: 15px 0px;

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-weight: bold;
            font-size: 18px;
            color: var(--color-text);
        }

        .stat-label {
            font-size: 16px;
            color: var(--color-text-6);
            margin-top: 5px;
            
        }
    }


    .menu_item_box {

        // margin-top: 30px;
        .menu_item {
            width: 100%;
            margin: 0 auto;

            text-align: center;
            display: flex;

            align-items: center;

            border-bottom: 1px solid var(--border-b);
            // border-bottom: 1px solid #434343;


            .single {
                margin-left: 20px;
                margin: 20px;
            }


        }
    }

}
</style>